<template>
  <div class="items-center justify-center flex flex-col w-full h-full">
    <p>立方体柱状图 2秒后数据更新 父元素relative</p>
    <p class="w-3/4 h-3/4 relative">
      <cube-bar-chart v-bind="cubeBarChartAtr"></cube-bar-chart>
    </p>
  </div>

</template>
<script setup lang="ts">
import CubeBarChart from "@/pages/echart/charts/CubeBarChart.vue";
import Mock from "@/mock";
import {ref} from "vue";

const chart2Category = ['胜采', '东辛', '现河', '纯梁', '滨南', '临盘', '河口', '孤东', '孤岛', '桩西', '鲁胜', '新春', '石开', '东胜', '鲁明', '海洋']

const cubeBarChartAtr = ref({
  title: '分公司生产时率构成(%)',
  category: chart2Category,
  values: chart2Category.map(e => {
    return Mock.mock(`@integer(20, 100)`)
  }),
  isRate: true,
  themeColor: `rgba(43, 55, 66, 1)`,
})

setTimeout(()=>{
  cubeBarChartAtr.value = {
    title: '5000后数据改变',
    category: chart2Category,
    values: chart2Category.map(e => {
      return Mock.mock(`@integer(20, 100)`)
    }),
    isRate: false,
    themeColor: `rgba(5, 84, 155, 1)`,
  }
}, 2000)
</script>
